<template>
  <div class="app-container">
  <el-form :model="form" label-width="80px" label-position="top">
    <el-row>
      <el-col :span="10">
    <el-form-item label="金融产品选择"  >

        <el-select v-model="form.jrProductId" placeholder="请选择" @change="selectCredit">
          <el-option
            v-for="item in productids"
            :key="item.jrProductName"
            :label="item.jrProductName"
            :value="item.id">
          </el-option>
        </el-select>
  </el-form-item>
    </el-col>


      <el-col :span="10">
      <el-form-item label="授信额度" label-width="80px" >

        <el-input style="width: 200px" v-model="credit" autocomplete="off" disabled ></el-input>%
      </el-form-item>
      </el-col>
    </el-row>
    <el-row>

    <el-col :span="10">
      <el-form-item label="年一次性服务费率" label-width="80px" >

        <el-input style="width: 200px" v-model="form.serviceFee" autocomplete="off" ></el-input>%
      </el-form-item>
    </el-col>
      <el-col :span="10">
    <el-form-item label="年利率" label-width="80px" >

      <el-input style="width: 200px" v-model="form.rate" autocomplete="off" ></el-input>%
    </el-form-item>
      </el-col>
    </el-row>

    <el-button type="warning" @click="add()">添加租客合同</el-button>
    <el-table :data="form.factoringDetailList" >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" type="index" />
      <el-table-column label="房产信息" align="center" prop="roomName" />
      <el-table-column label="房源编号" align="center" prop="roomCode" />
      <el-table-column label="租客姓名" align="center" prop="tenantName" />
      <el-table-column label="租客手机号" align="center" prop="tenantPhone" />
      <el-table-column label="应收租约金额" align="center" prop="shouldMonthRent" />
      <el-table-column label="保理授信额度" align="center" prop="factoringCreditMoney" />
      <el-table-column label="保理利息" align="center" prop="factoringInterest" />
      <el-table-column label="借款期限" align="center">
        <template slot-scope="slot">
          <span>{{slot.row.factoringPeriod}}个月{{slot.row.borrowedStart}}--{{slot.row.borrowedEnd}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['financial:factoring:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  <el-row>

 <el-col :span="10">
    <el-form-item label="应收租约合计" label-width="80px" >

      <el-input style="width: 200px" v-model="form.rentMoney" autocomplete="off"  readonly></el-input>
    </el-form-item>
 </el-col>
    <el-col :span="10">
    <el-form-item label="保理授信金额合计" label-width="80px" >

      <el-input style="width: 200px" v-model="form.factoringCreditMoney" autocomplete="off" readonly ></el-input>
    </el-form-item>
    </el-col>
  </el-row>
    <el-row>
      <el-col :span="10">
    <el-form-item label="服务费" label-width="80px" >

      <el-input style="width: 200px" v-model="form.serviceMoney" autocomplete="off"  readonly></el-input>
    </el-form-item>
      </el-col>
      <el-col :span="10">
    <el-form-item label="保理利息合计" label-width="80px" >

      <el-input style="width: 200px" v-model="form.factoringAdditionalMoney" autocomplete="off"  readonly></el-input>
    </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="实收保理金额" label-width="80px" >

      <el-input style="width: 200px" v-model="form.factoringTrueMoney" autocomplete="off"  readonly></el-input>
    </el-form-item>
    <el-form-item label="备注" label-width="80px" >

      <el-input id="input1"
                type="textarea"
                placeholder="请输入内容"
                v-model="form.remark"
                :rows="10"
                maxlength="300"
                show-word-limit
                style="width: 100%"
      >
      </el-input>
    </el-form-item>



  </el-form>
    <el-dialog title="添加租客合同" :visible.sync="dialogFormVisible">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="小区姓名">
          <el-input v-model="form.premiseName" placeholder="小区名称"></el-input>
        </el-form-item>
        <el-form-item label="租客姓名">
          <el-input v-model="form.tenantName" placeholder="租客姓名"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <template>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="tenantName"
            label="租客姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="roomName"
            label="房源信息"
            width="180">
          </el-table-column>
          <el-table-column
            prop="signingDate"
            label="签约日期">
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-link type="primary" @click="checkId(scope.row.id)">选中</el-link>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <div class="block">
        <span class="demonstration">显示总数</span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="form.pageNum"
          :page-size="form.pageSize"
          layout="total, prev, pager, next"
          :total="form.total">
        </el-pagination>
      </div>
    </el-dialog>
    <el-button type="success" @click="submitApplication">提交申请</el-button>
    </div>



</template>

<script>

import {selectProductId,contractList,listFinancing,submitReceivableFactoring} from "@/api/financial/factoring";


export default {
  name: "auditing",
  data(){
    return{
      form:{
        factoringDetailList:[],
        rentMoney:'',
        factoringCreditMoney:'',
        serviceMoney:'',
        factoringAdditionalMoney:'',
      },
      productids:[],
      credit:'',
      tableData:[],
      dialogFormVisible:false,
      formInline:{
        id:'',
        jrProductId:'',
        serviceFee:'',
        rate:'',

      },
      jrFactoringDetail:{},

    }
  },
  methods:{
    selectJrProduct(){
      selectProductId().then(response => {
        this.productids = response.rows;
        console.log(this.productids)

      });
    },
    submitApplication(){
      submitReceivableFactoring(this.form).then(response => {
        this.$message.success(response.msg);

      });

    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.form.pageSize=val;
      this.getList();

    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.form.pageNum=val;
      this.getList();
    },
    selectCredit(val){

      this.productids.forEach(e=>{
        if(e.id==val){
          this.credit=e.creditLine;
          this.form.companyName=e.companyName;
          this.form.monthLimit=e.instalmentPeriod;
        }
      })
    },
    onSubmit(){
      this.getList();
    },
    add(){
      if(this.form.jrProductId==null){
        // this.$message.error("请先选择金融产品")
        this.$alert('请先选择金融产品', '警告', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `请先选择金融产品`
            });
          }
        });
      }else{
        if(this.form.serviceFee==null|| this.form.serviceFee==''){
          // this.$message.error("请输入一次性服务费率！")
          this.$alert('请输入一次性服务费率', '警告', {
            confirmButtonText: '确定',
            callback: action => {
              this.$message({
                type: 'info',
                message: `请输入一次性服务费率`
              });
            }
          });
        }else{
          if(this.form.rate==null || this.form.rate==''){
            // this.$message.error("请输入利率(年化)！")
            this.$alert('请输入利率(年化)！', '警告', {
              confirmButtonText: '确定',
              callback: action => {
                this.$message({
                  type: 'info',
                  message: `请输入利率(年化)！`
                });
              }
            });
        }else{
            this.dialogFormVisible=true;
          }
      }
      }

    },
    getList(){
      contractList(this.form).then(response => {
        this.tableData = response.data.list;
        this.form.pageNum=response.data.pageNum;
        this.form.pageSize=response.data.pageSize;
        this.form.total=response.data.total;


      });

    },
    checkId(val){
      this.formInline.id=val;
      this.formInline.jrProductId=this.form.jrProductId;
      this.formInline.serviceFee=this.form.serviceFee;
      this.formInline.rate=this.form.rate;
      this.dialogFormVisible=false;
      listFinancing(this.formInline).then(response => {

        this.jrFactoringDetail = response.data;

        this.form.factoringDetailList.push(this.jrFactoringDetail);
        this.form.rentMoney=0.0;
        this.form.factoringCreditMoney=0.0;
        this.form.serviceMoney=0.0;
        this.form.factoringAdditionalMoney=0.0;
        this.form.factoringTrueMoney=0.0;

        this.form.factoringDetailList.forEach(e=>{
          this.form.rentMoney=this.form.rentMoney+e.shouldMonthRent;
          this.form.factoringCreditMoney+=e.factoringCreditMoney;
          this.form.serviceMoney+=e.serviceFee;
          this.form.factoringAdditionalMoney+=e.factoringInterest;
          this.form.factoringTrueMoney+=this.form.factoringCreditMoney+this.form.serviceMoney+this.form.factoringAdditionalMoney;
        })

        // this.form.rentMoney=this.jrFactoringDetail.shouldMonthRent;
        // this.form.factoringCreditMoney=this.jrFactoringDetail.factoringCreditMoney;
        // this.form.serviceMoney= this.jrFactoringDetail.serviceFee;
        // this.form.factoringAdditionalMoney=this.jrFactoringDetail.factoringInterest;
        // this.form.factoringTrueMoney=this.form.factoringCreditMoney+this.form.serviceMoney+this.form.factoringAdditionalMoney;

      });





    }
  },
  created() {
    this.selectJrProduct();
    this.getList();
  }
}
</script>

<style scoped>

</style>
